<template>
  <div class="app-container">
    <div class="user-info">
      <div class="header-img">
        <img :src="headerImage" width="100px" height="100px"/>
      </div>
      <span class="user-role">角色：{{ userInfo.role }}</span>
      <span class="user-name">登录账号：{{userInfo.username}}</span>
      <span class="user-corp">所属机构名称：{{userInfo.coporation}}</span>
      <span class="user-tel">手机号码：{{userInfo.tel}}</span>
      <span class="user-email">邮箱：{{userInfo.email}}</span>
      <span class="user-create">创建时间：{{userInfo.createtime}}</span>
    </div>
    <div class="user-container">
      <div class="user-pie" id="pie">

      </div>
      <div class="users-list">
        <el-table
          :data="tableData"
          height="300"
          border
          style="width: 100%">
          <el-table-column
            prop="user"
            label="角色">
          </el-table-column>
          <el-table-column
            prop="username"
            label="登录账号">
          </el-table-column>
          <el-table-column
            prop="corporation"
            label="机构">
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱">
          </el-table-column>
          <el-table-column
            prop="createtime"
            label="创建时间">
          </el-table-column>
        </el-table>
      </div>

    </div>
  </div>
</template>

<script>

var headerImage = require('../../../static/img/header.png')
export default {
  name: 'UserCenter',
  data () {
    return {
      headerImage: headerImage,
      /*
      * 登录账号信息
      * */
      userInfo: {
        role: '管理员',
        username: 'admin',
        coporation: '万达信息股份有限公司',
        tel: '18742143212',
        email: 'xadfsdfa@wondersgroup.com',
        createtime: '2012-01-01'
      },
      /*
      * 账户列表
      * */
      tableData: [{
        user: '管理员',
        username: 'admin',
        corporation: '万达信息',
        email: '123@sina.com',
        createtime: '2012-01-01'
      }, {
        user: '管理员',
        username: 'admin',
        corporation: '万达信息',
        email: '123@sina.com',
        createtime: '2012-01-01'
      }, {
        user: '管理员',
        username: 'admin',
        corporation: '万达信息',
        email: '123@sina.com',
        createtime: '2012-01-01'
      }, {
        user: '管理员',
        username: 'admin',
        corporation: '万达信息',
        email: '123@sina.com',
        createtime: '2012-01-01'
      }, {
        user: '管理员',
        username: 'admin',
        corporation: '万达信息',
        email: '123@sina.com',
        createtime: '2012-01-01'
      }, {
        user: '管理员',
        username: 'admin',
        corporation: '万达信息',
        email: '123@sina.com',
        createtime: '2012-01-01'
      }]
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.drawChart()
    })
  },
  methods: {
    /*
    * 绘制柱状图
    * */
    drawChart () {
      this.chartPie = this.$echarts.init(document.getElementById('pie'))

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '系统用户信息统计',
          x: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: [
              {value: 401, name: '普通用户'},
              {value: 20, name: '管理员'},
              {value: 300, name: '机构管理员'},
              {value: 100, name: '监管账号'},
              {value: 101, name: '测试账号'}
            ],
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.chartPie.setOption(option)
    }
  }
}
</script>

<style scoped>
.app-container {
  background-color: aliceblue;
  position: relative;
}
.user-info {
  position: relative;
  left: 50px;
  top: 30px;
  width: 80%;
  height: 25%;
  border: 1px solid black;
  background-color: white;
  font-size: small;
  font-family: 新宋体;
  font-weight: bold;
}
.user-container {
  position: absolute;
  left: 50px;
  top:35%;
  width: 80%;
  height: 65%;
  border: 1px solid black;
  background-color: white;
}
.header-img {
  position: absolute;
  left: 45px;
  top:25px;
}
.user-pie {
  position: absolute;
  width: 30%;
  height: 75%;
  left:5%;
  top:15%;
  border: 1px solid rgba(217, 214, 214, 0.99);
}
.users-list {
  position: absolute;
  width: 63%;
  height: 100%;
  left: 37%;
  top:15%;
}
.user-role {
  position:absolute;
  display:inline-block;
  margin-left: 16%;
  margin-top:40px
}
.user-name {
  position:absolute;
  display:inline-block;
  margin-left: 16%;
  margin-top:85px
}
.user-corp {
  position:absolute;
  display:inline-block;
  margin-left: 35%;
  margin-top:40px
}
.user-tel {
  position:absolute;
  display:inline-block;
  margin-left: 35%;
  margin-top:85px
}
.user-email {
  position:absolute;
  display:inline-block;
  margin-left: 70%;
  margin-top:40px
}
.user-create {
  position:absolute;
  display:inline-block;
  margin-left: 70%;
  margin-top:85px
}
</style>
